<template>
  <div class="time-sheet-content"  style="display: flex;flex-direction: column; ">
    <div class="time-sheet-content-module"
         v-loading='loadingUserStatusBtn'
         element-loading-spinner="el-icon-loading"
         element-loading-background="rgba(255, 255, 255, 0.8)">
      <el-button-group style="width:260px;">
        <el-button size="small"
                   style="padding-left:0;height:32px;padding-right:0;width:120px;backgroundColor:#42be65;color:#FFFFFF;border:none;margin-right: 10px; margin-left: 10px"
                   :style="{backgroundColor:attendanceSchema.color_in}"
                   v-if="comUserStatus === 'out'"
                   @click="changeUserStatus('in')">{{ $t('custom.attendance.board.inBtn') }}</el-button>
        <el-button size="small"
                   style="padding-left:0;height:32px;padding-right:0;width:120px;backgroundColor:#42be65;color:#FFFFFF;border:none;"
                   :style="{backgroundColor:attendanceSchema.color_wfh}"
                   v-if="comUserStatus === 'out'"
                   @click="changeUserStatus('wfh')">{{ $t('custom.attendance.board.wfh') }}</el-button>
        <el-button size="small"
                   style="padding-left:0;height:32px;padding-right:0;width:67px;backgroundColor:#0043ce;color:#FFFFFF;border:none;margin-right:8px"
                   :style="{backgroundColor:attendanceSchema.color_onsite}"
                   v-if="comUserStatus === 'in' || comUserStatus === 'wfh' || comUserStatus === 'back'"
                   @click="changeUserStatus('onsite')">{{ $t('custom.attendance.board.onsite') }}</el-button>
        <el-button size="small"
                   style="padding-left:0;height:32px;padding-right:0;width:55px;backgroundColor:#f1c21b;color:#FFFFFF;border:none;margin-right:8px"
                   :style="{backgroundColor:attendanceSchema.color_break}"
                   v-if="comUserStatus === 'in' || comUserStatus === 'wfh' || comUserStatus === 'back'"
                   @click="changeUserStatus('break')">{{ $t('custom.attendance.board.breakBtn') }}</el-button>
        <el-button size="small"
                   style="padding-left:0;height:32px;padding-right:0;width:57px;backgroundColor:#ff832b;color:#FFFFFF;border:none;margin-right:8px"
                   :style="{backgroundColor:attendanceSchema.color_lunch}"
                   v-if="comUserStatus === 'in' || comUserStatus === 'wfh' || comUserStatus === 'back'"
                   @click="changeUserStatus('lunch')">{{ $t('custom.attendance.board.lunchBtn') }}</el-button>
        <el-button size="small"
                   style="padding-left:0;height:32px;padding-right:0;width:41px;backgroundColor:#c1c7cd;color:#FFFFFF;border:none;"
                   :style="{backgroundColor:attendanceSchema.color_tbfvywci}"
                   v-if="comUserStatus === 'in' || comUserStatus === 'wfh' || comUserStatus === 'back'"
                   @click="changeUserStatus('out')">{{ $t('custom.attendance.board.outBtn') }}</el-button>
        <el-button size="small"
                   style="padding-left:0;height:32px;padding-right:0;width:260px;backgroundColor:#42be65;color:#FFFFFF;border:none;"
                   :style="{backgroundColor:attendanceSchema.color_in}"
                   v-if="comUserStatus === 'break' || comUserStatus === 'lunch' || comUserStatus === 'onsite'"
                   @click="changeUserStatus('back')">{{ $t('custom.attendance.board.backBtn') }}</el-button>
      </el-button-group>
    </div>
    <div class="time-sheet-content-list"
        style="flex: 1;height: 0;"
         v-loading='loadingUserRecordList'
         :element-loading-text="$t('loading')"
         element-loading-spinner="el-icon-loading"
         element-loading-background="rgba(255, 255, 255, 0.8)">
      <div class="list scroll-css">
        <div class="list-title"></div>
        <div class="list-item"
             v-for="(its, index) in userStatusRecordList"
             :key="index">
          <div class="item-content">
            <div class="content-status">
              <div v-if="its.currentAction === 'in'"
              :style="{backgroundColor:attendanceSchema.color_in}"></div>
              <div v-if="its.currentAction === 'wfh'"
                   :style="{backgroundColor:attendanceSchema.color_wfh}"></div>
              <div v-else-if="its.currentAction === 'back'"
              :style="{backgroundColor:attendanceSchema.color_in}"></div>
              <div v-else-if="its.currentAction === 'out'"
              :style="{backgroundColor:attendanceSchema.color_tbfvywci}"></div>
              <div v-else-if="its.currentAction === 'break'"
              :style="{backgroundColor:attendanceSchema.color_break}"></div>
              <div v-else-if="its.currentAction === 'lunch'"
              :style="{backgroundColor:attendanceSchema.color_lunch}"></div>
              <div v-else-if="its.currentAction === 'onsite'"
              :style="{backgroundColor:attendanceSchema.color_onsite}"></div>
              <div v-if="its.subAction">{{ its.subAction.toUpperCase() }}</div>
              <div v-else>{{ formatStatus(its.action) }}</div>
            </div>
            <div class="content-tips" style="font-size:12px;">&nbsp;{{ timeAreaFormat(its.logTime)}}</div>
          </div>
          <div class="item-edit">
            <el-tooltip :open-delay="1000" class="item"
                        effect="dark"
                        :content="$t('custom.attendance.record.modify')"
                        placement="top">
              <!-- <el-button size="mini"
                         class="edit-btn adjust-btn"
                         style="width:28px;height:28px;font-size:14px;padding: 0px 0px;border:1px solid #FFF;">
                         <i class="cuifont icon_adjust_time"  @click="editTimeEntry(its)"></i>
                         </el-button> -->
              <!-- <el-button size="mini" -->
                         <!-- class="edit-btn adjust-btn"
                         style="width:28px;height:28px;font-size:14px;padding: 0px 0px;border:1px solid #FFF;"> -->
                         <div class="cuifont icon_adjust_time cursor_pointer" style="margin-top:10px;color:#7B7B7B"  @click="editTimeEntry(its)"></div>
                         <!-- </el-button> -->
            </el-tooltip>
          </div>
        </div>
      </div>
    </div>
    <EditTimeEntryComponent ref="edit-time-entry-dialog"
                            :itemInfo="editItemData"
                            @initOther='getUserChangeRecord' />
  </div>
</template>

<script>
import { GlobalTimeformat } from '@/utils/common'
import EditTimeEntryComponent from './edit-time-entry'

export default {
  components: { EditTimeEntryComponent },
  props: {
    tenantSwitch: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      userStatusRecordList: [],
      editItemData: null,
      loadingUserRecordList: false,
      loadingUserStatusBtn: false
    }
  },
  computed: {
    comUserStatus () {
      if (this.userStatusRecordList && this.userStatusRecordList.length > 0) {
        return this.userStatusRecordList[0].currentAction
      } else {
        return 'out'
      }
    },
    attendanceSchema () {
      return this.$store.state.attendance.schema
    }
  },
  created () {
    const _self = this
    this.getUserChangeRecord()
  },
  methods: {
    editTimeEntry (val) {
      this.editItemData = val
      this.$refs['edit-time-entry-dialog'].openDialog()
    },
    changeUserStatus (status) {
      this.loadingUserStatusBtn = true
      const params = {
        tenantCode: this.$store.state.user.tenantCode,
        userId: this.$store.state.user.id
        // subAction: status
      }
      if (status === 'in' || status === 'wfh' || status === 'out') {
        params.action = status
      } else {
        params.subAction = status
      }

      this.$interface.attendance.changeUserLogStatusApi(params)
        .then(({ data: res }) => {
          this.loadingUserStatusBtn = false
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          if (res.data.result) {
            // this.getUserChangeRecord()
            this.$emit('initData')
            // this.$parent.initSheetAndUserList()
            return this.$message.success(res.msg)
          } else {
            return this.$message.error(this.$t('custom.attendance.userStatusRepeatTips', { 'status': status.toUpperCase() }))
          }
        })
        .catch(() => {
          this.loadingUserStatusBtn = false
        })
    },
    getUserChangeRecord () {
      this.loadingUserRecordList = true
      const params = {
        tenantCode: this.$store.state.user.tenantCode,
        userId: this.$store.state.user.id
        // subAction: 'back'
      }
      this.$interface.attendance.getUserChangeStatusListApi(params)
        .then(({ data: res }) => {
          this.loadingUserRecordList = false
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.userStatusRecordList = res.data
        })
        .catch(() => { this.loadingUserRecordList = false })
    },
    formatStatus (e) {
      try {
        return e.toUpperCase()
      } catch (error) {
      }
    },
    timeAreaFormat (time) {
      return GlobalTimeformat(time, 'HH:mm:ss')
    }
  }
}
</script>
<style lang="scss" scoped>
.time-sheet-content {
  // border: 1px solid red;
  @import "./attendance.scss";
}
.cursor_pointer {
  cursor: pointer;
}
</style>
